<template>
  <div class="form">
    <a href="https://www.cnblogs.com/e0yu/p/9835764.html">https://www.cnblogs.com/e0yu/p/9835764.html</a>
    <h3>{{msg}}</h3>
    <div class="row">
      获取焦点：<input type="text" v-input v-focus>
      <p class="browser">text is: {{ msg1 }}</p>
    </div>
    <div class="row">
      username：<input type="text" v-input v-required name="username">
      <p class="browser">text is: {{ msg2 }}</p>
    </div>
    <div class="row">
      <!-- required：true/false 表示这个是必填项 -->
      必填项：<input type="text" v-input v-checked="{required:true}" >
      <p class="browser">text is: {{ msg3 }}</p>
    </div>
    <div class="row">
      <!-- <input type="text" v-input v-validate="'required|email|phone|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'">
      required  验证是否是必填项
      email 验证是否是邮箱
      phone 验证是否是电话号码
      min(5) 验证最小值
      max(3) 验证最大值
      minlength(6) 验证最小长度
      maxlength(12) 验证最大长度
      regex(/^[0-9]*$/) 进行正则验证
      -->
      混合验证：<input type="text" v-input v-validate="'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9\.]*$/)'">
      <p class="browser">text is: 数字大于5小16，长度大于6小于12</p>
    </div>
    <div class="row">
      <!--
      验证必须是数字：/^[0-9]*$/
      验证由26个英文字母组成的字符串：/^[A-Za-z]+$/
      验证手机号： /^[1][3,4,5,7,8][0-9]{9}$/;
      验证邮箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      -->
      验证手机号码：<input type="text" v-input v-validate="'required|phone'" placeholder="验证手机号码">
    </div>
    <div class="row">
      <!-- required：true/false 表示这个是必填项 -->
      验证邮箱：<input type="text" v-input v-validate="'required|email'" placeholder="验证邮箱">
    </div>
  </div>
</template>
<script type="text/javascript">
  import data from './data'
  import methods from './method'
  import directives from './directives'

  export default{
    name: 'form05',
    data(){
      return data.init();
    },
    methods:methods,
    directives: directives.init()
  }
</script>
<style>
  /*
  .input{padding-bottom:20px;}
  .app input{width: 300px; height: 35px; outline:none; background:#ddd;}
  .app span{padding-left:20px;}
  .tipsDiv{height:27px; line-height: 25px; border:1px solid #333; background:#333; padding: 0px 5px; border-radius:4px; color:#fff; font-size:16px;}
  .tipsDiv:before{content:''; display: block; border-width:0 5px 8px; border-style:solid; border-color:transparent transparent #000; position:absolute; top:-9px; left:6px;}
  */
</style>
<style type="text/css">
  .form{
    padding:20px;
    font-size:16px !important;
  }
  .form .row{
    margin:5px;
  }
  .form .label{
    color:#222;
    font-weight: bold;
    font-size:14px;
  }
  .form .input,.form .textarea{
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width:350px;
  }
  .form .input{
    height: 40px;
    line-height: 40px;
  }
  .form .textarea{
  }
  .form .browser{
    padding-left:20px;background: #f2f2f2;padding:4px;letter-spacing: 2px;
    border-radius:4px;margin-top:2px;
    color:#888;
  }

  .el-cascader,.el-select{
    width:100%;
  }
</style>

